<template>
  <div class="content">


    <div class="control-box">

      <el-row justify="space-around" class="el-row">
        <el-col :span="6">
          <el-statistic title="页面日访问量" :value="pv" />
        </el-col>
        <el-col :span="6">
          <el-statistic title="总浏览量" :value="outputValue" />
        </el-col>
        <el-col :span="6">
          <el-statistic title="日浏览人数" :value="uv" />
        </el-col>
        <el-col :span="6">
          <el-statistic title="总浏览人数" :value="totalUv" />
        </el-col>
      </el-row>

    </div>

  </div>
</template>

<script>


export default {
  name: 'HomePage',
  components: {},
  data() {
    return {
      pv: 0,
      outputValue: 0,
      uv: 0,
      totalUv: 0,
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let _this = this;
      this.$axios({
        method: 'post',
        url: '/api/visit/getPanelData',
        data: {}
      }).then(res => {

        _this.pv = res.data.data.pv;
        _this.outputValue = res.data.data.totalPv;
        _this.uv = res.data.data.uv;
        _this.totalUv = res.data.data.totalUv;
      })
    },



  }
}
</script>

<style scoped lang="less">
.page-content {
  display: flex;
  padding: 0 10px;

  .my-side {
    height: 100%;
  }

  .page-main {
    width: 100%;
    padding: 0 10px;

    .control-box {
      height: 60px;
      line-height: 60px;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-top: 20px;

      .el-row {
        width: 100%;
      }

      .control-right {
        .search-input {
          margin-right: 10px;
          height: 30px;
          line-height: 30px;
          width: 300px;
          padding: 0 5px;
        }
      }
    }

    .table-box {
      width: 100%;
    }
  }


}
</style>